<template>
<div class="tc-right">
    <div class="tc-righttop-tab j-tc-righttop-tab">
        <ul class="RTtab clearfix">
            <li class="visitTab-btn RTtab-active2 fl">设计回访</li>
            <!-- <li class="visitTab-btn RTtab-active3 fl">客户回访</li> -->
            <li class="list-btn RTtab-active fl">其他按钮</li>
            <li class="list-btn RTtab-active fr">
                <router-link :to="routerPath('list')">列表</router-link>
            </li>
        </ul>
    </div>
    <div class="tc-right-top clearfix">
        <div class="fl needdealt" v-if="Number(userInfo.u_diqu)==39">
            <ul>
                <router-link class="bgGreen" tag="li" :to="{path:routerPath('orderView'),query:{orderId:item.orderId}}"  v-for="(item,index) in orderArrangeList" :key="index" :title="item.orderName">{{item.orderName}}</router-link>
                <!-- <li class="bgGreen" v-for="(item,index) in orderArrangeList" :key="index">{{item.orderName}}</li> -->
            </ul>
        </div>
        <div class="visitbox">
            <!-- 回访内容 #j-visit 是一个整体内容 切换列子看 Index/Right-->
            <div class="visit" id="j-visit" v-scrollHeight="250">
                <div class="visitCon">
                    <div class="visi-list" :class="item.displayPosition==0?'tx-left':'tx-right'" v-for="(item,index) in ReturnVisits" :key="index">
                        <div class="visi-listtop" v-if="item.displayPosition==0">
                            <span class="visi-name">{{item.returnVisitFlag |slice(0,1) }}</span>
                            <span class="visi-date">{{item.userName}}&nbsp;&nbsp;{{item.createDate}}&nbsp;&nbsp;{{item.returnVisitFlag}}</span>
                            <span :class="{'cGreen': item.returnVisitState==1,'cOrange': item.returnVisitState==2,'cRed': item.returnVisitState==3}">{{item.returnVisitState | filterstate }}</span>
                        </div>
                        <div class="visi-listtop" v-else>
                            <span :class="{'cGreen': item.returnVisitState==1,'cOrange': item.returnVisitState==2,'cRed': item.returnVisitState==3}">{{item.returnVisitState | filterstate}}</span>
                            <span class="visi-date">{{item.userName}}&nbsp;&nbsp;{{item.createDate}}&nbsp;&nbsp;{{item.returnVisitFlag}}</span>
                            <span class="visi-name">{{item.returnVisitFlag |slice(0,1) }}</span>
                        </div>
                        <p class="visi-listtxt"  :class="{'cBlue': item.displayPosition==1}">
                            {{item.returnVisitSummary}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tc-right-bottom pa10 relative">
        <div class="tc-right-bottom-left relative">
            <ul class="topdaily">
                <li>
                    <a @click="topdailyclick(1)" class="topdailybtn" :class="{'active':returnVisitState==1}" href="javascript:">正常</a>
                </li>
                <li>
                    <a @click="topdailyclick(2)" class="topdailybtn" :class="{'active':returnVisitState==2}" href="javascript:">异常</a>
                </li>
                <li>
                    <a @click="topdailyclick(3)" class="topdailybtn" :class="{'active':returnVisitState==3}" href="javascript:">问题</a>
                </li>
            </ul>
            <div class="dailyrgt-divZi" v-if="returnVisitState==''">
                <p class="tx-center">先解决业务问题，才有资格说管理。前两个因素完成之后，再反馈系统问题。</p>
            </div>
            <div class="visi-text-content" v-else>
                <textarea placeholder="请输入回访内容" class="hf-textarea mb10" v-model="returnVisitSummary"></textarea>
                <input type="submit" value="提交" class="hf-submit" @click="addDifReturnVisit">
            </div>
        </div>
        <div class="EventpenaltyDiv">
            <a href="javascrpit:;" class="EventpenaltyBtn">事件平台</a>
            <a href="javascrpit:;" class="EventpenaltyBtn">平台</a>
        </div>
    </div>
    <!-- 三段渲染容器 -->
    <transition class="animated faster" enter-active-class="animated faster slideInLeft" leave-active-class="animated faster slideOutLeft">
        <router-view></router-view>
    </transition>
</div>
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
import {findReturnVisitsByRegion, addDifReturnVisit, orderArrange, saveDivisionCountdown} from '../Resources/Api'
export default {
    data () {
        return {
            userInfo: {},
            ReturnVisits: [],
            returnVisitSummary: '',
            returnVisitState: '',
            orderArrangeList: []
        }
    },
    filters: {
        filterstate (value) {
            let result
            switch (value) {
            case '1':
                result = '正常'
                break
            case '2':
                result = '异常'
                break
            case '3':
                result = '问题'
                break

            default:
                break
            }
            return result
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    mounted () {
        this.userInfo = this.$utils.getLocal('userInfo')
        // console.log(this.userInfo)
        // this.findReturnVisitsByRegion()
        this.orderArrange()
    },
    methods: {
        ...mapMutations({
            updateLeft: `SET_UPDATE_LEFT`
        }),
        findReturnVisitsByRegion () {
            findReturnVisitsByRegion({
                region: this.leftInfo.u_diqu,
                limit: 50,
                isGroup: Number(this.userInfo.u_diqu) === 39 ? 1 : 0,
                visitFlag: ''
            }).then(results => {
                this.ReturnVisits = results.data.Body
                this.$nextTick(() => {
                    $('.visit').scrollTop($('.visitCon').height() - $('.visitbox').height())
                })
            })
        },
        // 回访时间插入 闫传强接口

        saveDivisionCountdown () {
            saveDivisionCountdown({
                user_card_no: this.userInfo.u_kahao,
                diqu: this.leftInfo.u_diqu
            }).then(results => {
                if (results.data.StatusCode >= 0) {

                } else {
                    layer.msg(results.data.StatusMsg)
                }
            })
        },
        addDifReturnVisit () {
            addDifReturnVisit({
                region: this.leftInfo.u_diqu,
                returnVisitType: '02',
                deptId: '1',
                cardNum: this.userInfo.u_kahao,
                userName: this.userInfo.xinming,
                returnVisitFlag: Number(this.userInfo.u_diqu) === 39 ? '访集' : '司访',
                // cardNum: '01010515',
                // userName: '张启明',
                // returnVisitFlag: '',
                displayPosition: '1',
                returnVisitSummary: this.returnVisitSummary,
                returnVisitState: this.returnVisitState

            }).then(results => {
                this.returnVisitSummary = ''
                this.returnVisitState = ''
                this.findReturnVisitsByRegion()
                this.saveDivisionCountdown()
                this.updateLeft()
            })
        },
        topdailyclick (index) {
            this.returnVisitState = index
        },
        // 查询集团对某分司经理级别发起的订单(执行中、待验收阶段的订单)
        orderArrange () {
            orderArrange({
                code: this.leftInfo.u_diqu,
                isGroup: '1',
                executorPost: '经理'
            }).then(results => {
                this.orderArrangeList = results.data.Body
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        }

    },
    watch: {
        leftInfo () {
            this.findReturnVisitsByRegion()
            this.orderArrange()
        }
    }
}
</script>
<style>
.visi-listtxt{word-break: break-all;}
.needdealt li{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
